import React from 'react';
import { Row, Col, Select } from 'antd';
import FormItem from 'src/components/FormItem';
import Question from 'src/components/Question';

export default function ExecuteMode(props) {
  const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 18,
    },
  };

  const formItems = [
    {
      label: {
        label: '执行模式',
        ...layout,
      },
      name: 'execute_mode',
      options: {
        initialValue: '',
        rules: [{ required: true, message: '请选择' }],
      },
      component: (
        <Select>
          <Select.Option value='exclusion'>互斥执行</Select.Option>
          <Select.Option value='normal'>普通执行</Select.Option>
        </Select>
      ),
      after: (
        <Question
          title={
            <div>
              <p>1.互斥执行：从上到下执行，无论有没有退出动作，一旦规则命中，则不再向下执行；</p>

              <p>2.普通执行：从上到下执行，除非遇到退出动作，否则会顺序执行所有规则；</p>
            </div>
          }
        />
      ),
    },
  ];

  return (
    <Row type='flex' gutter={20} style={{ marginTop: '20px' }}>
      {formItems.map((item) => {
        return (
          <Col span={8} key={item.name}>
            <FormItem form={props.form} item={item} colNum={1} />
          </Col>
        );
      })}
    </Row>
  );
}
